<!--款式列表 -->
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-video-camera"></i> 款式列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="style_container">
            <diV class="container">
                <div class="container-heared">
                    <div class="container-heared-left">
                        <el-input placeholder="请输入关键字" class="handle-input mr10 userhandle" v-model="categoryvalueKey"></el-input>
                        <el-button class="search" type="primary" icon="el-icon-search" @click="Search">搜索</el-button>
                    </div>
                </div>
                <div class="tables">
                    <template>
                        <!-- 款式列表表格 -->
                        <el-table :data="StyleDataList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column prop="style_name" label="款式名称" align="center"></el-table-column>
                            <el-table-column prop="style_no" label="款式编号" align="center"></el-table-column>
                            <el-table-column prop="lb_wgt" label="重量" align="center"></el-table-column>
                            <el-table-column label="有无视频" width="100" prop='video_address'>
                              <template slot-scope="scope">
                                {{scope.row.video_address?'有':'无'}}
                              </template>
                            </el-table-column>
                            <el-table-column prop="img_no" label="款式图（查看大图）" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-image
                                        style="width: 30px; height: 30px"
                                        :src="scope.row.img_no"
                                        :preview-src-list="CarouselsrcList"
                                    ></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="100">
                                <template slot-scope="scope">
                                    <el-button plain @click="StyleEditor(scope.row)" class="bd_item"
                                        ><i class="el-icon-edit"></i>编辑</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <div class="pag">
                    <!-- 分页效果 -->
                    <el-pagination
                        background
                        layout="total,prev, pager, next, jumper"
                        :total="count"
                        :page-size="20"
                        @current-change="handleCurrentChange"
                        :current-page.sync="page"
                        @size-change="handleSizeChange"
                    >
                    </el-pagination>
                </div>
                <!-- 编辑 -->
                <el-dialog title="编辑" :visible.sync="CarouselnewVisible" :width="dialogWidth">
                    <el-form :model="StyleForm" status-icon ref="newruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="款式编号" prop="style_no">
                            <el-input type="text" placeholder="请输入款式编号" v-model="StyleForm.stylevalue" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="款式视频" prop="img_no">
                            <el-upload
                                class="avatar-uploader el-upload--text"
                                action="http://yztapi.medozb.com/api/admin/upload_style_video"
                                :data="{
                                    token: this.token,
                                    style_no: StyleForm.stylevalue
                                }"
                                :on-success="handleVideoSuccess"
                                :before-upload="beforeUploadVideo"
                                :show-file-list="false"
                            >
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="视频预览" prop="flie">
                            <video v-if="StyleForm.Video != ''" :src="StyleForm.Video" class="avatar" controls="controls"></video>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="CarouselnewVisible = false">取 消</el-button>
                        <el-button type="danger" @click="ClearButton">清空按钮</el-button>
                        <el-button type="primary" @click="StyleDeterminationBtn">确 定</el-button>
                    </span>
                </el-dialog>
            </diV>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            categoryvalueKey: '',
            token: '',
            page: 1,
            page_size: 10,
            count: 0,
            StyleDataList: [],
            CarouselsrcList: [],
            CarouselnewVisible: false,
            StyleForm: {
                stylevalue: '',
                Video: ''
            },
            stylevalue: '',
            imgUrls: '',
            dialogVisible: false,
            dialogWidth: 0,
            Video_img: '',
            name: '无'
        };
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.setDialogWidth();
            })();
        };
    },
    created() {
        this.getkey();
        this.setDialogWidth();
        this.styleList();
    },
    methods: {
        // 获取token
        getkey() {
            this.token = sessionStorage.getItem('token');
        },
        //视频详情
        VideoDetails() {
            this.$axios
                .get('admin/style_video_detail', {
                    params: {
                        token: this.token,
                        style_no: this.StyleForm.stylevalue
                    }
                })
                .then((res) => {
                    this.StyleForm.Video = res.data.data.video_address;
                    console.log('this.StyleForm.Video', this.StyleForm.Video);
                });
        },
        //获取款式上传的列表
        styleList() {
            this.$axios
                .get('admin/style_list', {
                    params: {
                        token: this.token,
                        page: this.page,
                        page_size: this.page_size,
                        address:'',
                        keyword:this.categoryvalueKey
                    }
                })
                .then((res) => {
                    this.StyleDataList = res.data.data.data;
                    this.count = res.data.data.count;
                    this.CarouselsrcList = this.StyleDataList.map((e) => {
                        return e.img_no;
                    });
                    // console.log(this.StyleDataList.video_address)
                    // this.StyleDataList.map((e)=>{

                    // })
                    console.log(res);
                });
        },
        //页码的改变
        handleCurrentChange(val) {
            this.page = val;
            this.styleList();
        },
        handleSizeChange(size) {
            this.page_size = size;
            this.styleList();
        },
        //验证视频大小和视频格式
        beforeUploadVideo(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/webm'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            if (!isLt10M) {
                this.$message.error('上传视频大小不能超过10MB哦!');
                return false;
            }
            this.$message('正在上传');
        },
        //上传成功
        handleVideoSuccess(res, file) {
            if (res.code === 2000) {
                this.$message.success('视频上传成功');
                this.StyleForm.Video = res.data.imgs;
                this.Video_img = res.data.img;
                this.disabled = false;
            } else {
                this.$message.error('视频上传失败，请重新上传！');
            }
        },
        //搜索
        Search(val) {
          this.keyword = val
          this.styleList()
        },
        //款式编辑
        StyleEditor(row) {
            this.CarouselnewVisible = true;
            this.StyleForm.stylevalue = row.style_no;
            this.VideoDetails();
        },
        //清空按钮
        clearbtn() {},
        //弹出框自定义宽度
        setDialogWidth() {
            var val = document.body.clientWidth;
            const def = 500; // 默认宽度
            if (val < def) {
                this.dialogWidth = '100%';
            } else {
                this.dialogWidth = def + 'px';
            }
        },
        //编辑修改确定
        StyleDeterminationBtn() {
            this.CarouselnewVisible = false;
            this.$axios
                .get('admin/style_video_update', {
                    params: {
                        token: this.token,
                        style_no: this.StyleForm.stylevalue,
                        video_address: this.Video_img
                    }
                })
                .then((res) => {
                    console.log(res);
                    this.$message.success('修改成功');
                    this.styleList()
                });
        },
        //清空按钮
        ClearButton() {
          this.CarouselnewVisible = false;
            this.$axios
                .get('admin/style_video_delete', {
                    params: {
                        token: this.token,
                        style_no: this.StyleForm.stylevalue
                    }
                })
                .then((res) => {
                    console.log(res);
                    this.$message.success('删除成功');
                    this.styleList()
                });
        }
    }
};
</script>
<style scoped>
.container {
    border: none;
}
.style_container {
    /* border: 1px solid white; */
    background-color: white;
    height: 100vh;
}
.container-heared {
    display: flex;
    justify-content: space-between;
    /* border: 1px solid black; */
}
.container-heared-left {
    /* border: 1px solid blue; */
    display: flex;
    justify-content: space-between;
}
/deep/ .el-upload {
    width: 180px;
}
/deep/.el-upload--text {
    width: 180px;
}
.container_add {
    position: absolute;
    display: none;
    margin-left: 72px;
    margin-top: 77px;
    z-index: 100;
    font-size: 50px;
    color: gray;
    font-weight: 500;
}
.search {
    margin-left: 10px;
}
.tables {
    margin-top: 30px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 300px;
    height: 400px;
    display: block;
}
.pag {
    margin-top: 10px;
    /* border: 1px solid black; */
    text-align: right;
}
</style>